<script setup lang="ts">
import DemoBox from '@/components/DemoBox/DemoBox.vue';
import EraseCode from './Erase.vue?raw';
import Erase from './Erase.vue';
import ClipCode from './Clip.vue?raw';
import Clip from './Clip.vue';
import NonZeroSurroundRuleCode from './NonZeroSurroundRule.vue?raw';
import NonZeroSurroundRule from './NonZeroSurroundRule.vue';
import PageLayout from '@/components/PageLayout.vue';
</script>

<template>
    <PageLayout>
        <DemoBox :libs="[]" title="介绍">
            <p>下面演示的是如何在 canvas 元素上打洞</p>
        </DemoBox>
        <DemoBox
            :code="NonZeroSurroundRuleCode"
            :libs="[]"
            title="非零环绕规则"
        >
            <NonZeroSurroundRule />
            <template #description> Three.js 基础用法</template>
        </DemoBox>
        <DemoBox :code="EraseCode" :libs="[]" title="擦掉">
            <Erase />
            <template #description> Three.js 基础用法</template>
        </DemoBox>
        <DemoBox :code="ClipCode" :libs="[]" title="反向裁剪">
            <Clip />
            <template #description> Three.js 基础用法</template>
        </DemoBox>
    </PageLayout>
</template>

<style lang="scss" scoped>
@use '@/style/global' as global;

p {
    padding: 10px;
    color: #666666;
}
</style>
